<template>
  <div class="content-box" :style="style">
    <router-view v-slot="{ Component }" v-if="isRouterAlive">
      <transition name="fade">
          <component :is="Component" />
      </transition>
    </router-view >
   </div>
</template>

<script>
export default {
  provide () {
    return {
      reload: this.reload()
    }
  },
  props: {
    widths: String
  },
  watch: {
    widths (val) {
      this.style.width = val
      console.log(val)
    }
  },
  data () {
    return {
      style: {
        width: this.widths
      },
      // 刷新页面
      isRouterAlive: true
    }
  },
  mounted () {
    console.log(this.widths)
  },
  methods: {
    // 通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载
    reload () {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }

  }
}
</script>

<style lang="scss" scoped>
@use '@/styles/init.scss' as h;
.fade-enter-active,
.fade-leave-active {
  transition: opacity  0.2s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
// .content-box{
//   margin-top: 64px;
// }
</style>
